<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>岗位列表</title>
  <script src="../../../static/kaige/js/szload.js"></script>
</head>

<body>
  <div class="kaige-body layui-form kaige-btn-radius" lay-filter="ranking-index">
    <table class="layui-table" id="rankingTable" lay-filter="rankingTable" lay-size="sm"></table>
  </div>
  <script type="text/html" id="TPL-treeTable-header">
        <div class="layui-inline">
            <div class="kaige-select-div" id="company_id2_select_box"></div>
            <input type="hidden" id="company_id2_name"/>
            <input type="hidden" id="company_id2"/>
        </div>
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="reload"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="open-all"><i class="layui-icon layui-icon-down"></i> 全展开</button>
            <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="close-all"><i class="layui-icon layui-icon-right"></i> 全关闭</button>
        </div>        
    </script>
  <script type="text/html" id="TPL-treeTable-tdbar">
        <div class="layui-btn-group">
        <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="look"><i class="layui-icon layui-icon-eye"></i></a>
        <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a class="layui-btn layui-bg-red layui-btn-sm"  lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
        </div>
    </script>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['kaige', 'tableSelect', 'xmSelect'], function () {
        var treeTable = layui.treeTable, $ = layui.$, kaige = layui.kaige, tableSelect = layui.tableSelect, form = layui.form, layer = layui.layer;
        var xmSelect2 = layui.xmSelect;
        //查看图片
        //window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }
        // 渲染表格
        var rankingre = treeTable.render({
          elem: "#rankingTable",
          id: "IDrankingTable",
          url: "/hrm.ranking/index",
          toolbar: '#TPL-treeTable-header',
          height: 'full-35',
          cols: [[
            { type: 'numbers', title: '序号' },
            { field: 'name', title: '名称', width: 300 },
            { field: 'code', title: '编码', width: 180 },
            { field: 'company_id_name', title: '所属单位', width: 200 },
            { field: 'sort', title: '排序', width: 60, edit: 'text' },
            { field: 'status', title: '状态', width: 100, align: 'center', templet: "#status_td" },
            { field: 'id', title: 'ID', width: 50 },
            { fixed: "right", title: "操作", width: 200, align: "center", toolbar: "#TPL-treeTable-tdbar" },
          ]],
          page: false,
          tree: {
            view: { expandAllDefault: true, showIcon: false }
          },
          done: function () {
            //所属单位
            kaige.xmSelectTree({
              id: 'company_id2',
              url: '/select/companytree',
              udata: { automatch: 1 },
              radio: true,
              clickClose: true,
              style: {
                minHeight: '30px',
                lineHeight: '30px',
                borderRadius: '30px',
                height: '30px',
              },
              tips: '请选择单位',
              callback: function (des) {
                //执行重载数据
                treeTable.reloadData('IDrankingTable', {
                  where: {
                    company_id: des.id
                  }
                });
              }
            });
          }
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(rankingTable)", function (obj) {
          // 获取选中行
          switch (obj.event) {
            case "add":
              btn_add();
              break;
            case "reload":
              treeTable.reloadData('IDrankingTable');
              break;
            case "open-all":
              treeTable.expandAll('IDrankingTable', true); // 展开全部节点
              break;
            case "close-all":
              treeTable.expandAll('IDrankingTable', false); // 关闭全部节点
              break;
          }
        });

        // 单元格工具事件--此处是 filter  不是 id
        treeTable.on('tool(rankingTable)', function (obj) {
          switch (obj.event) {
            case "look":
              btn_look(obj.data);
              break;
            case "edit":
              btn_edit(obj.data);
              break;
            case "del":
              btn_del(obj.data);
              break;
          }
        });

        //监听单元格编辑
        treeTable.on('edit(rankingTable)', function (obj) {
          var udata = {
            id: obj.data.id,
            field: 'sort',
            value: obj.value
          };
          szoa.post('/hrm.ranking/setsort', udata, function (res) {
            layer.tips('修改完成', obj.td);
          });
        });


        function addeditform() {
          //上级职位
          kaige.xmSelectTree({
            id: 'ranking_id',
            url: '/select/rankingtree',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });
          //所属单位
          kaige.xmSelectTree({
            id: 'company_id',
            url: '/select/companytree',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });
        }
        //添加
        function btn_add() {
          kaige.form({
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加'
            , url: '/hrm.ranking/add' //数据源
            , data: {}
            , id: 'kaige'
            , area: ['800px', '450px']
            , encode: 1
            , callbefore: function () {
              addeditform();
            }
            , postbefore: function (udata) {
              var updata = udata;
              updata.is_lock = updata.is_lock ? 1 : 2;
              updata.type = updata.type ? 1 : 2;
              return updata;
            }
            , callback: function (res) {
              res.status && treeTable.reloadData('IDrankingTable');
            }
          });
        };

        function btn_edit(d) {
          kaige.form({
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑'
            , url: '/hrm.ranking/edit' //数据源
            , data: { id: d.id }
            , id: 'kaige'
            , area: ['800px', '450px']
            , encode: 1
            , callbefore: function () {
              addeditform();
            }
            , postbefore: function (udata) {
              var updata = udata;
              updata.is_lock = updata.is_lock ? 1 : 2;
              updata.type = updata.type ? 1 : 2;
              return updata;
            }
            , callback: function (res) {
              res.status && treeTable.reloadData('IDrankingTable');
            }
          });
        }

        function btn_look(d) {
          kaige.details({
            title: '<i class="layui-icon layui-icon-eye"></i> 查看'
            , url: '/hrm.ranking/look' //数据源
            , data: { id: d.id }
            , id: 'look'
            , area: ['500px', '450px']
            , overflow: 0
            , callbefore: function () {
              layui.element.render();
            }
          });
        }

        function btn_del(d) {
          layer.confirm('真的要删除么', { icon: 3, title: '名称：' + d.name }, function (index) {
            $.post('/hrm.ranking/del', { id: d.id }, function (res) {
              if (res.status) {
                layer.msg(res.msg, { time: 1000 }, function () {
                  treeTable.reloadData('IDrankingTable');
                  layer.close(index);
                });
              } else {
                layer.msg(res.msg);
              }
            });
          });
        }

        //监听启禁用操作
        form.on('switch(status)', function (obj) {
          var udata = {
            id: (this.value).trim(),
            field: 'status',
            value: obj.elem.checked ? 1 : 2
          };
          szoa.post('/hrm.ranking/setdisabled', udata, function (res) {
            layer.tips(udata.value == 1 ? '启用' : '禁用', obj.othis);
          });
        });
      });
    });
  </script>
  <script type="text/html" id="kaige_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="kaige_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label">职位上级</label>
        <div class="layui-input-inline" style="width:220px;margin-top: 1px;">
          <div id="ranking_id_select_box"></div>
          <input type="hidden" id="ranking_id_name" />
          <input type="hidden" id="ranking_id" required lay-verify="required" lay-reqText="请选择职位上级" value="{{ d.pid || '' }}"
            name="pid" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">职位名称</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="name" required lay-verify="required" value="{{ d.name || '' }}" placeholder="请输入名称"
            autocomplete="off" class="layui-input" />
        </div>
        <label class="layui-form-label">编码</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="code" required lay-verify="required" value="{{ d.code || '' }}" placeholder="请输入编码"
            autocomplete="off" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">所属单位</label>
        <div class="layui-input-inline" style="width:220px;margin-top: 1px;">
          <div id="company_id_select_box"></div>
          <input type="hidden" id="company_id_name" value="{{ d.company_id_name || '' }}" name="company_id_name" />
          <input type="hidden" id="company_id" required lay-verify="required" lay-reqText="请选择所属单位"
            value="{{ d.company_id || '' }}" name="company_id" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="number" name="sort" class="layui-input" value="{{ typeof(d.sort)==='number' ? d.sort: '' }}" />
        </div>
        <label class="layui-form-label">禁用</label>
        <div class="layui-input-inline border3" style="width:219px">
          <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" {{# if(d.status==1 ){ }} checked {{# } }} />
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>
  <script type="text/html" id="status_td">
    <input type="checkbox" value="{{ d.id }}" data-id="{{ d.id }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ (d.status == 1) ? "checked" : "" }}/>
  </script>

  <script type="text/html" id="look_form_html">
    <div class="kaige-body">
        <table class="layui-table">
            <tr>
            <td style="width: 30%;">职位上级</td>
            <td>{{ d.ranking_id_name || "无" }}</td>
            </tr>
            <tr>
            <td>职位名称</td>
            <td>{{ d.name }}</td>
            </tr>
            <tr>
            <td>职位编码</td>
            <td>{{ d.code }}</td>
            </tr>
            <tr>
            <td>所属单位</td>
            <td>{{ d.company_id_name }}</td>
            </tr>
            <tr>
            <td>排序</td>
            <td>{{ d.sort }}</td>
            </tr>
            <tr>
            <td>状态</td>
            <td>{{ d.status ==1 ? "启用":"禁用" }}</td>
            </tr>
        </table>
    </div>
  </script>
</body>

</html>